<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收银台</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .cashier-container {
            padding: 15px 15px 15px 75px;
            display: flex;
            height: calc(100vh - 30px);
        }
        .left-panel {
            width: 65%;
            margin-right: 15px;
            display: flex;
            flex-direction: column;
        }
        .right-panel {
            width: 35%;
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
        }
        .goods-panel {
            flex: 1;
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            overflow: auto;
        }
        .member-panel {
            height: 120px;
            background: #fff;
            padding: 15px;
            border-radius: 4px;
        }
        .cart-items {
            flex: 1;
            overflow: auto;
            margin: 10px 0;
        }
        .cart-footer {
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
        .goods-item {
            display: inline-block;
            width: 120px;
            height: 120px;
            margin: 5px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            position: relative;
        }
        .goods-item:hover {
            border-color: #009688;
        }
        .goods-name {
            margin-top: 5px;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .goods-price {
            color: #ff6b6b;
            font-size: 16px;
            font-weight: bold;
        }
        .member-info {
            margin-top: 10px;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 4px;
            display: none;
        }
        .search-bar {
            margin-bottom: 10px;
        }
        .category-bar {
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/leftmenu.html'; ?>
    
    <div class="cashier-container">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <!-- 商品展示区 -->
            <div class="goods-panel">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" id="searchGoods" placeholder="输入商品名称/编码搜索" class="layui-input">
                    </div>
                </div>
                <!-- 分类栏 -->
                <div class="category-bar">
                    <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="">全部</button>
                </div>
                <!-- 商品列表 -->
                <div id="goodsList"></div>
            </div>
            
            <!-- 会员信息区 -->
            <div class="member-panel">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="searchMember" placeholder="输入会员卡号/手机号搜索" class="layui-input">
                        </div>
                        <button class="layui-btn layui-btn-primary" id="btnOpenCard">开卡</button>
                        <button class="layui-btn layui-btn-primary" id="btnRecharge">充值</button>
                    </div>
                </div>
                <div class="member-info">
                    <p>会员卡号：<span id="memberCardNo"></span></p>
                    <p>会员姓名：<span id="memberName"></span></p>
                    <p>可用余额：<span id="memberBalance"></span> 元</p>
                    <p>可用积分：<span id="memberPoints"></span></p>
                </div>
            </div>
        </div>
        
        <!-- 右侧面板 -->
        <div class="right-panel">
            <!-- 购物车 -->
            <div class="cart-items">
                <table class="layui-table" lay-skin="nob">
                    <thead>
                        <tr>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="cartList"></tbody>
                </table>
            </div>
            
            <!-- 结算区 -->
            <div class="cart-footer">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付方式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="payment" value="cash" title="现金" checked>
                            <input type="radio" name="payment" value="wechat" title="微信">
                            <input type="radio" name="payment" value="alipay" title="支付宝">
                            <input type="radio" name="payment" value="balance" title="余额" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品合计</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="totalAmount" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">优惠金额</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="discountAmount" value="0">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">实收金额</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="actualAmount" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-lg layui-btn-fluid" id="btnSubmit">结算</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 开卡表单模板 -->
    <script type="text/html" id="openCardTpl">
        <form class="layui-form" lay-filter="openCardForm" style="padding: 15px;">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">会员卡号</label>
                        <div class="layui-input-block">
                            <input type="text" name="card_no" required lay-verify="required" placeholder="输入会员卡号(F2)" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">会员姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="输入会员姓名" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" placeholder="输入会员手机号" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">生日</label>
                        <div class="layui-input-block">
                            <input type="text" name="birthday" id="birthday" placeholder="选择生日日期" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">会员等级</label>
                        <div class="layui-input-block">
                            <select name="level" required lay-verify="required">
                                <option value="">请选择会员等级</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">所属店铺</label>
                        <div class="layui-input-block">
                            <select name="store_id" required lay-verify="required">
                                <option value="">请选择所属店铺</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">会员密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" placeholder="输入会员密码" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="confirm_password" placeholder="再次输入会员密码" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">售卡工本费</label>
                        <div class="layui-input-block">
                            <input type="number" name="card_fee" required lay-verify="required" value="0" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户余额</label>
                        <div class="layui-input-block">
                            <input type="number" name="balance" value="0" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户积分</label>
                        <div class="layui-input-block">
                            <input type="number" name="points" value="0" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付方式</label>
                        <div class="layui-input-block">
                            <select name="payment_method">
                                <option value="cash">现金</option>
                                <option value="wechat">微信</option>
                                <option value="alipay">支付宝</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">提成员工</label>
                        <div class="layui-input-block">
                            <select name="staff_id">
                                <option value="">请选择提成员工</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">车牌号</label>
                        <div class="layui-input-block">
                            <input type="text" name="car_number" placeholder="输入会员车牌号" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" placeholder="输入会员详细地址" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注说明" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="openCard">确定</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 充值表单模板 -->
    <script type="text/html" id="rechargeTpl">
        <form class="layui-form" lay-filter="rechargeForm" style="padding: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">充值金额</label>
                <div class="layui-input-block">
                    <input type="number" name="amount" required lay-verify="required" placeholder="请输入充值金额" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">支付方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="payment_method" value="cash" title="现金" checked>
                    <input type="radio" name="payment_method" value="wechat" title="微信">
                    <input type="radio" name="payment_method" value="alipay" title="支付宝">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注说明" class="layui-textarea"></textarea>
                </div>
            </div>
            <button class="layui-btn" lay-submit lay-filter="recharge" style="display: none;">提交</button>
        </form>
    </script>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['layer', 'form', 'laydate'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,laydate = layui.laydate
            ,$ = layui.$;
        
        // 初始化日期选择器
        laydate.render({
            elem: '#birthday'
        });
        
        // 初始化表单
        form.render();
        
        var cart = {
            items: [],
            member: null,
            
            // 添加商品到购物车
            addItem: function(goods) {
                var found = false;
                this.items.forEach(function(item) {
                    if(item.id === goods.id) {
                        item.quantity++;
                        found = true;
                    }
                });
                if(!found) {
                    this.items.push({
                        id: goods.id,
                        name: goods.name,
                        price: goods.price,
                        quantity: 1
                    });
                }
                this.updateCart();
            },
            
            // 更新购物车
            updateCart: function() {
                var html = '';
                var total = 0;
                this.items.forEach(function(item) {
                    var subtotal = item.price * item.quantity;
                    total += subtotal;
                    html += '<tr>';
                    html += '<td>'+ item.name +'</td>';
                    html += '<td>￥'+ item.price +'</td>';
                    html += '<td>'+ item.quantity +'</td>';
                    html += '<td>￥'+ subtotal.toFixed(2) +'</td>';
                    html += '<td><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger" onclick="cart.removeItem('+ item.id +')">删除</a></td>';
                    html += '</tr>';
                });
                $('#cartList').html(html);
                $('#totalAmount').val(total.toFixed(2));
                this.updateActualAmount();
            },
            
            // 移除商品
            removeItem: function(id) {
                this.items = this.items.filter(function(item) {
                    return item.id !== id;
                });
                this.updateCart();
            },
            
            // 更新实收金额
            updateActualAmount: function() {
                var total = parseFloat($('#totalAmount').val()) || 0;
                var discount = parseFloat($('#discountAmount').val()) || 0;
                var actual = total - discount;
                if(actual < 0) actual = 0;
                $('#actualAmount').val(actual.toFixed(2));
            }
        };
        
        // 监听优惠金额输入
        $('#discountAmount').on('input', function(){
            cart.updateActualAmount();
        });
        
        // 搜索商品
        $('#searchGoods').on('keyup', function(){
            var keyword = $(this).val();
            if(keyword) {
                $.ajax({
                    url: '/app/ky_shouyin/cashier/getGoods',
                    data: {keyword: keyword},
                    success: function(res){
                        if(res.code === 0) {
                            var html = '';
                            res.data.forEach(function(item){
                                html += '<div class="goods-item" onclick="cart.addItem('+ JSON.stringify(item) +')">';
                                html += '<div class="goods-name">'+ item.name +'</div>';
                                html += '<div class="goods-price">￥'+ item.price +'</div>';
                                html += '</div>';
                            });
                            $('#goodsList').html(html);
                        }
                    }
                });
            }
        });
        
        // 搜索会员
        $('#searchMember').on('keyup', function(){
            var keyword = $(this).val();
            if(keyword) {
                $.ajax({
                    url: '/app/ky_shouyin/cashier/getMember',
                    data: {keyword: keyword},
                    success: function(res){
                        if(res.code === 0 && res.data) {
                            cart.member = res.data;
                            $('#memberCardNo').text(res.data.card_no);
                            $('#memberName').text(res.data.name);
                            $('#memberBalance').text(res.data.balance);
                            $('#memberPoints').text(res.data.points);
                            $('.member-info').show();
                            $('input[name="payment"][value="balance"]').prop('disabled', false);
                        } else {
                            cart.member = null;
                            $('.member-info').hide();
                            $('input[name="payment"][value="balance"]').prop('disabled', true);
                        }
                        form.render('radio');
                    }
                });
            } else {
                cart.member = null;
                $('.member-info').hide();
                $('input[name="payment"][value="balance"]').prop('disabled', true);
                form.render('radio');
            }
        });
        
        // 开卡
        $('#btnOpenCard').on('click', function(){
            layer.open({
                type: 1,
                title: '开卡',
                area: ['700px', '600px'],
                content: $('#openCardTpl').html(),
                success: function(layero, index){
                    form.render();
                    
                    // 获取会员等级列表
                    $.ajax({
                        url: '/app/ky_shouyin/member/getLevels',
                        success: function(res){
                            if(res.code === 0) {
                                var html = '<option value="">请选择会员等级</option>';
                                res.data.forEach(function(item){
                                    html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                                });
                                layero.find('select[name="level"]').html(html);
                                form.render('select');
                            }
                        }
                    });
                    
                    // 获取店铺列表
                    $.ajax({
                        url: '/app/ky_shouyin/store/getList',
                        success: function(res){
                            if(res.code === 0) {
                                var html = '<option value="">请选择所属店铺</option>';
                                res.data.forEach(function(item){
                                    html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                                });
                                layero.find('select[name="store_id"]').html(html);
                                form.render('select');
                            }
                        }
                    });
                    
                    // 获取员工列表
                    $.ajax({
                        url: '/app/ky_shouyin/staff/getList',
                        success: function(res){
                            if(res.code === 0) {
                                var html = '<option value="">请选择提成员工</option>';
                                res.data.forEach(function(item){
                                    html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                                });
                                layero.find('select[name="staff_id"]').html(html);
                                form.render('select');
                            }
                        }
                    });
                }
            });
        });
        
        // 提交开卡
        form.on('submit(openCard)', function(data){
            // 验证两次密码是否一致
            if(data.field.password !== data.field.confirm_password) {
                layer.msg('两次输入的密码不一致');
                return false;
            }
            
            $.ajax({
                url: '/app/ky_shouyin/cashier/createMember',
                type: 'POST',
                data: data.field,
                success: function(res){
                    if(res.code === 0) {
                        layer.msg('开卡成功');
                        layer.closeAll('page');
                        // 自动填充搜索框并触发搜索
                        $('#searchMember').val(data.field.card_no).trigger('keyup');
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
        
        // 充值
        $('#btnRecharge').on('click', function(){
            if(!cart.member) {
                layer.msg('请先选择会员');
                return;
            }
            layer.open({
                type: 1,
                title: '充值',
                area: ['500px', '400px'],
                content: $('#rechargeTpl').html(),
                success: function(){
                    form.render();
                }
            });
        });
        
        // 提交充值
        form.on('submit(recharge)', function(data){
            data.field.member_id = cart.member.id;
            $.ajax({
                url: '/app/ky_shouyin/cashier/recharge',
                type: 'POST',
                data: data.field,
                success: function(res){
                    if(res.code === 0) {
                        layer.msg('充值成功');
                        layer.closeAll('page');
                        // 刷新会员信息
                        $('#searchMember').trigger('keyup');
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
        
        // 提交订单
        $('#btnSubmit').on('click', function(){
            if(cart.items.length === 0) {
                layer.msg('请先添加商品');
                return;
            }
            var data = {
                items: cart.items,
                member_id: cart.member ? cart.member.id : 0,
                payment_method: $('input[name="payment"]:checked').val(),
                total_amount: $('#totalAmount').val(),
                discount_amount: $('#discountAmount').val(),
                actual_amount: $('#actualAmount').val()
            };
            $.ajax({
                url: '/app/ky_shouyin/cashier/createOrder',
                type: 'POST',
                data: data,
                success: function(res){
                    if(res.code === 0) {
                        layer.msg('结算成功');
                        // 清空购物车
                        cart.items = [];
                        cart.updateCart();
                        // 清空会员信息
                        $('#searchMember').val('').trigger('keyup');
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        });
    });
    </script>
</body>
</html> 